<template>
  <div style="margin-top: 1px;">
    <el-form :model="formData" style="margin-top: 1vh;" :inline="true" >
      <el-form-item label="气象数据来源:" style="float: left;">
        <label slot="label" style="color: #ffffff">气象数据来源:</label>
      <el-select  placeholder="CSWD" v-model="formData.data_source" style="width: 90px"></el-select>
      </el-form-item>
      <el-form-item label="地址:" style="float: left;">
        <label slot="label" style="color: #ffffff">地址:</label>
        <el-input v-model="formData.addr" placeholder="请输入内容" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="经纬度:" style="float: left;">
        <label slot="label" style="color: #ffffff">经纬度:</label>
        <el-input v-model="formData.longitude_latitude" placeholder="请输入内容" style="width: 175px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="selectmap(formData.addr)">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-upload  action="/iepsapi/upload"
                   :show-file-list="false"
                   :on-success="handleSuccess"
                   :before-upload="beforeUpload">
          <el-button class="button-text" type="primary">上传气象数据</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="downloaddata()">下载气象模板</el-button>
      </el-form-item>
      <el-button class="button" type="primary" @click="save()">保存</el-button>
    </el-form>
    <div style="position: absolute;width: 100%;height: 50vh;margin-top: -1vh;">
      <baidu-map id="allmap" @ready="mapReady">
        <!--城市列表控件-->
        <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
      </baidu-map>

    </div>
  </div>
</template>
<script>
  export default {
    name: 'meteorological',
    data(){
      return{
        selectItem: 'weather',
        point: "",
        formData: {
          data_source: "CSWD",
          addr: "",
          longitude_latitude: "",
          file_path: "\\src\\main\\webapp\\resources",
          tem_path: "\\src\\main\\webapp\\template\\气象数据模板.xlsx",
        },
      }
    },
    methods:{
      clickProject (id) {
        if (this.selectItem === id) {
          return
        }
        this.selectItem = id
      },
      mapReady({ BMap, map }) {
        let self=this;
        // 选择一个经纬度作为中心点
        this.point = new BMap.Point(117.130,36.632);
        map.centerAndZoom(this.point, 7);
        //滚轮
        map.enableScrollWheelZoom(true);
        //单击事件
        map.addEventListener('click', function (e) {
          //绑定回经纬度框
          self.formData.longitude_latitude = e.point.lng + ',' + e.point.lat;
          /*alert('点击位置经纬度：' + e.point.lng +','+ e.point.lat);*/
        });
      },
      //根据地址搜索
      selectmap(address){
        this.$http.get("/iepsapi/getAddr?address="+address).then((res) => {
          if(res.data.flag){
            this.$message({
              type:'success',
              message:res.data.message
            });
            //进行回显
            this.formData.longitude_latitude= res.data.data;
          }else{
            this.$message.error(res.data.message);
          }
        })
      },
      //下载数据模板
      downloaddata(){
        window.location.href = '/iepsapi/download';
      },
      //校验是不是xls或xlsx
      beforeUpload(file){
        const isXLS = file.type === 'application/vnd.ms-excel';
        if(isXLS){
          return true;
        }
        const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
        if (isXLSX) {
          return true;
        }
        this.$message.error('上传文件只能是xls或者xlsx格式!');
        return false;
      },
      //上传成功提示
      handleSuccess(response, file) {
        if(response.flag){
          this.$message({
            message: response.message,
            type: 'success'
          });
          this.formData.file_path=response.data;
        }else{
          this.$message.error(response.message);
        }
        console.log(response, file, fileList);
      },
      //保存
      save(){
        if (this.$root.project_id==0){
          this.$message.error('请选择当前项目!');
        }else{
          this.$http.post("/iepsapi/plan/save",{
            data_source:this.formData.data_source,
            addr: this.formData.addr,
            longitude_latitude: this.formData.longitude_latitude,
            file_path:this.formData.file_path,
            tem_path: this.formData.tem_path,
            project_id:this.$root.project_id
          }).then((res)=>{
            if (res.data.flag) {
              this.$message({
                type: 'success',
                message: res.data.message
              });
            } else {
              this.$message.error(res.data.message);
            }
          });
        }
      },
    }
  }
</script>
<style scoped>
  .el-main{
    background-color: #2d3d88;
    width: 100%;
    height: 477px;
    margin-top: -3vh;
  }
  /* 设定地图的大小 */
  #allmap{
    height: 480px;
    width: 100%;
  }
  .button{
    width: 80px;
  }
</style>

